<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="新增对客日志" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="dkrzRuleForm" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="项目名称" borderBottom @click="cascaderFunc('projectShow')">
								<u--input
									placeholder="选择项目名称"
									inputAlign="left"
									v-model="dkrzRuleForm.project_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="是否需要再次沟通" borderBottom>
								<u-radio-group v-model="dkrzRuleForm.is_communicate_again" placement="row">
									<u-radio label="是" :name="1"></u-radio>
									<u-radio label="否" :name="2"></u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="跟进方式" borderBottom @click="cascaderFunc('followUpShow')">
								<u--input
									placeholder="选择跟进方式"
									inputAlign="left"
									v-model="dkrzRuleForm.follow_up_method_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="本次沟通阶段" borderBottom @click="cascaderFunc('communicationShow')">
								<u--input
									placeholder="选择本次沟通阶段"
									inputAlign="left"
									v-model="dkrzRuleForm.communication_stage_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item
								labelPosition="top"
								labelWidth="100%"
								label="意向签约金额"
								borderBottom
								v-if="dkrzRuleForm.communication_stage != 5 && dkrzRuleForm.communication_stage != 6"
							>
								<u--input
									type="number"
									placeholder="输入意向签约金额"
									inputAlign="left"
									v-model="dkrzRuleForm.intended_signing_amount"
									border="none"
									color="#000000"
									fontSize="28rpx"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="下次沟通时间" borderBottom>
								<picker mode="date" :value="dkrzRuleForm.next_communication_time" @change="dateFunc">
									<u--input
										placeholder="选择下次沟通时间"
										inputAlign="left"
										v-model="dkrzRuleForm.next_communication_time"
										border="none"
										color="#000000"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</picker>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="本次沟通内容" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="dkrzRuleForm.content"
									border="none"
									placeholder="请输入本次沟通内容"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="附件">
								<file-upload @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
			<!-- 项目列表 -->
			<u-picker
				closeOnClickOverlay
				:show="projectShow"
				:columns="[projectList]"
				@confirm="confirmFunc($event, 'projectShow')"
				@cancel="closeFunc('projectShow')"
				@close="closeFunc('projectShow')"
				keyName="project_name"
				title="项目列表"
			></u-picker>
			<!-- 跟进方式列表 -->
			<u-picker
				closeOnClickOverlay
				:show="followUpShow"
				:columns="[followUpList]"
				@confirm="confirmFunc($event, 'followUpShow')"
				@cancel="closeFunc('followUpShow')"
				@close="closeFunc('followUpShow')"
				keyName="label"
				title="跟进方式"
			></u-picker>
			<!-- 本次沟通内容列表 -->
			<u-picker
				closeOnClickOverlay
				:show="communicationShow"
				:columns="[communicationList]"
				@confirm="confirmFunc($event, 'communicationShow')"
				@cancel="closeFunc('communicationShow6')"
				@close="closeFunc('communicationShow')"
				keyName="label"
				title="本次沟通内容"
			></u-picker>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			dkrzRuleForm: {
				project_id: '',
				project_name: '',
				follow_up_method: '',
				follow_up_method_name: '',
				communication_stage: '',
				communication_stage_name: '',
				intended_signing_amount: '',
				is_communicate_again: 2,
				next_communication_time: '',
				content: '',
				log_file: []
			},
			projectList: [], //项目列表
			projectShow: false, //项目列表弹窗
			followUpList: [
				{
					label: '电话',
					value: 1
				},
				{
					label: '微信',
					value: 2
				},
				{
					label: '企微',
					value: 3
				},
				{
					label: '邮件',
					value: 4
				},
				{
					label: '上门拜访',
					value: 5
				}
			],
			followUpShow: false, //跟进方式弹窗
			communicationList: [
				{
					label: '勘场',
					value: 1
				},
				{
					label: '报价',
					value: 2
				},
				{
					label: '洽谈',
					value: 3
				},
				{
					label: '签约',
					value: 4
				},
				{
					label: '结算',
					value: 5
				},
				{
					label: '售后',
					value: 6
				}
			],
			communicationShow: false //本次沟通阶段弹窗
		};
	},
	onLoad() {
		this.selectProjectList();
	},
	methods: {
		// 日期选择
		dateFunc(e) {
			this.dkrzRuleForm.next_communication_time = e.detail.value;
		},
		// 打开选择弹窗
		cascaderFunc(type) {
			console.log(type);
			switch (type) {
				case 'projectShow':
					this.projectShow = true;
					break;
				case 'followUpShow':
					this.followUpShow = true;
					break;
				case 'communicationShow':
					this.communicationShow = true;
					break;
				default:
			}
		},
		// 关闭选择弹窗
		closeFunc(type) {
			this[type] = false;
		},
		// 选择弹窗确认
		confirmFunc(e, type) {
			switch (type) {
				case 'projectShow':
					this.dkrzRuleForm.project_name = e.value[0].project_name;
					this.dkrzRuleForm.project_id = e.value[0].id;
					this.projectShow = false;
					break;
				case 'followUpShow':
					this.dkrzRuleForm.follow_up_method = e.value[0].value;
					this.dkrzRuleForm.follow_up_method_name = e.value[0].label;
					this.followUpShow = false;
					break;
				case 'communicationShow':
					this.dkrzRuleForm.communication_stage = e.value[0].value;
					this.dkrzRuleForm.communication_stage_name = e.value[0].label;
					this.communicationShow = false;
					break;
				default:
			}
		},
		// 项目列表
		selectProjectList() {
			this.$Apipc
				.selectProjectList({
					less_status: 1150,
					greater_status: 1015
				})
				.then((res) => {
					console.log(res, '项目列表');
					if (res.code == 200) {
						this.projectList = res.data;
					}
				});
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.dkrzRuleForm.log_file.push(obj);
			});
		},
		deletePic(e) {
			this.dkrzRuleForm.log_file.splice(e.index, 1);
		},
		async submit() {
			let dkrzRuleForm = this.dkrzRuleForm;
			if (!dkrzRuleForm.project_name) {
				uni.showToast({
					title: '请先选择项目',
					icon: 'error'
				});
				return;
			}
			if (!dkrzRuleForm.follow_up_method_name) {
				uni.showToast({
					title: '请先选择跟进方式',
					icon: 'error'
				});
				return;
			}
			if (!dkrzRuleForm.communication_stage_name) {
				uni.showToast({
					title: '请先选择本次沟通阶段',
					icon: 'error'
				});
				return;
			}
			if (!dkrzRuleForm.content) {
				uni.showToast({
					title: '请输入本次沟通内容',
					icon: 'error'
				});
				return;
			}
			if (!dkrzRuleForm.log_file.length) {
				uni.showToast({
					title: '请选择附件',
					icon: 'error'
				});
				return;
			}
			let data = {
				content: dkrzRuleForm.content,
				project_id: dkrzRuleForm.project_id,
				follow_up_method: dkrzRuleForm.follow_up_method,
				communication_stage: dkrzRuleForm.communication_stage,
				intended_signing_amount: dkrzRuleForm.intended_signing_amount,
				is_communicate_again: dkrzRuleForm.is_communicate_again,
				next_communication_time: dkrzRuleForm.next_communication_time || ''
			};
			uni.showLoading({
				title: '文件上传中',
				mask: true
			});
			let log_file = await this.$upload(dkrzRuleForm.log_file);
			uni.hideLoading();
			data.log_file = log_file.arrResult;
			this.addCustomerLogs(data);
		},
		// 添加对客日志
		addCustomerLogs(data) {
			uni.showLoading({
				title: '信息提交中',
				mask: true
			});
			this.$Apipc.addCustomerLogs(data).then((res) => {
				console.log(res, '添加对客日志');
				uni.hideLoading();
				if (res.code == 200) {
					var pages = getCurrentPages();
					var perPage = pages[pages.length - 2];
					perPage.$vm.$refs.customerLog.searchFunc();

					setTimeout(() => {
						if (perPage) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					title: res.code == 200 ? '操作成功' : res.message,
					icon: res.code == 200 ? 'success' : 'error'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
